<template>
  <div class="total-order">
    <template>
      <div class="block df aic">
        <span class="demonstration">时间范围</span>
        <el-date-picker
          v-model="date"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="inputday"
        ></el-date-picker>
        <el-button type="primary" class="submit" @click="getData">
          查询
        </el-button>
      </div>
      <div class="myChart" ref="chartRef"></div>
    </template>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import {formatYMDhms} from '@/filters'
import {orderTotalReq} from '@/api/order'
import {Col} from 'element-ui'
export default {
  data() {
    return {
      date: [],
    }
  },
  methods: {
    async getData() {
      let res = await orderTotalReq({
        date: JSON.stringify(this.date),
      })
      //解构数据
      let {data} = res.data
      //处理数据
      let xData = data.map(v => formatYMDhms(v.orderTime))
      // console.log('xData :>> ', xData)
      let series = [
        {
          type: 'bar',
          name: '降雨量',
          data: data.map(v => v.orderAmount),
        },
      ]
      // console.log('series :>> ', series)
      //画图
      this.renderLine({
        series,
        xData,
      })
    },
    //画折线图
    renderLine(obj) {
      //默认值
      let defaultOptions = {
        title: '数据图表',
      }
      //最终参数 传入参数合并默认值
      let finalObj = {...defaultOptions, ...obj}

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(this.$refs.chartRef)
      //配置项
      let options = {
        title: {
          text: finalObj.title,
          left: 15,
          top: 15,
        },
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          top: 15,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: finalObj.xData,
        },
        yAxis: {
          type: 'value',
        },
        //核心数据
        series: finalObj.series,
      }
      // 绘制图表
      myChart.setOption(options)
    },
  },

  created() {
    this.getData()
  },
  mounted() {},
}
</script>

<style lang="scss" scoped>
.total-order {
  width: 100%;
}
.demonstration {
  margin-right: 20px;
}
.block {
  padding: 20px;
  background: #fff;
}
.myChart {
  padding: 20px;
  margin-top: 30px;
  width: 100%;
  height: 460px;
  background: #fff;
}
.submit {
  margin-left: 20px;
}
</style>
